<template>
  <div
    style="width: auto; margin-bottom: 20px; display: flex; align-items: center"
  >
    <div style="margin: 0 10px">角色搜索:</div>
    <el-input
      v-model="roleName"
      placeholder="请输入用户"
      clearable
      style="width: auto"
    />
    <div class="search" @click="search">
      <i style="margin-right: 5px"
        ><cv-font name="icon-search" color="#fff" :size="10"></cv-font
      ></i>
      <span>搜索</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import { useRouter } from 'vue-router'
const roleName = ref('')
const emit = defineEmits(['searchRole'])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);
const search = () => {
  emit('searchRole', roleName.value)
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.search {
  height: 30px;
  background-color: #1890ff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  padding: 2px 10px;
  margin-left: 10px;
}
</style>
